<!--
 * @Author: Wushiqi
 * @Descripttion: 事件冒泡和事件捕获
 * @Date: 2021-05-06 13:43:53
 * @LastEditor: Wushiqi
 * @LastEditTime: 2021-05-06 14:57:17
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="box1">
    <div id="box2">
      <div id="box3">点击</div>
    </div>
  </div>
  <script>
    /**
     * addEventListener的第三个参数为true表示捕获；
     * 默认为空表示冒泡，为false也表示冒泡。
     */
    const box1 = document.getElementById('box1')
    const box2 = document.getElementById('box2')
    const box3 = document.getElementById('box3')

    // 冒泡从子到父 box3 -> box2 -> box1
    // box1.addEventListener('click', () => {
    //   console.log('box1触发');
    // })
    // box2.addEventListener('click', () => {
    //   console.log('box2触发');
    // })
    // box3.addEventListener('click', () => {
    //   console.log('box3触发');
    // })

    // 捕获从父到子 box1 -> box2 -> box3
    // box1.addEventListener('click', () => {
    //   console.log('box1触发');
    // }, true)
    // box2.addEventListener('click', () => {
    //   console.log('box2触发');
    // }, true)
    // box3.addEventListener('click', () => {
    //   console.log('box3触发');
    // }, true)

    // 阻止冒泡 box3 -> box2
    // box1.addEventListener('click', () => {
    //   console.log('box1触发');
    // })
    // box2.addEventListener('click', (event) => {
    //   console.log('box2触发');
    //   event.stopPropagation()
    // })
    // box3.addEventListener('click', () => {
    //   console.log('box3触发');
    // })

    // 阻止捕获 box1 -> box2
    box1.addEventListener('click', () => {
      console.log('box1触发');
    }, true)
    box2.addEventListener('click', (event) => {
      console.log('box2触发');
      event.stopPropagation()
    }, true)
    box3.addEventListener('click', () => {
      console.log('box3触发');
    }, true)
  </script>
</body>
</html>